<div class="section" id="facerecognition">

{{#if clustersByName}}
	<h2 style="display: flex;">
		<a class="title-icon icon-back"></a>
		<span class="title-name">{{personName}}</span>
	</h2>
	<div id="persons-navigation">
		{{#each clustersByName}}
			<h2 class="cluster-title" style="display: flex;">
				<span class="title-name">{{this.name}}</span>
				<a id="rename-cluster" title="{{renameHint}}" class="title-icon icon-rename" data-id="{{this.id}}"></a>
				<a id="hide-cluster" title="{{hideHint}}" class="title-icon icon-disabled-user" data-id="{{this.id}}"></a>
			</h2>
			<div class="faces-previews">
				{{#each this.faces}}
					<a target="_blank" href="{{fileUrl}}">
						<div class="face-preview lozad" data-background-image="{{thumbUrl}}" width="50" height="50"></div>
					</a>
				{{/each}}
			</div>
		{{/each}}
	</div>
{{else if personName}}
	<h2 style="display: flex;">
		<a class="title-icon icon-back"></a>
		<span class="title-name">{{personName}}</span>
		<a id="rename-person" title="{{renameHint}}" class="title-icon icon-rename" data-id="{{personName}}"></a>
		<a id="hide-person" title="{{hideHint}}" class="title-icon icon-disabled-user" data-id="{{personName}}"></a>
	</h2>
	<button id="show-more-clusters" type="button" class="primary">
		{{showMoreButton}}
	</button>
	<div id="optional-buttons-div"></div>
	<div class="persons-previews">
		{{#each personImages}}
			<div class="image-box">
				<div class="file-preview-big lozad" data-background-delimiter="\" data-background-image="{{{thumbUrl}}}" width="128" height="128" data-id="{{filename}}"></div>
			</div>
		{{/each}}
	</div>
{{else if persons}}
	<h2>
		{{appName}}
	</h2>
	<input id="enableFacerecognition" name="enableFacerecognition" type="checkbox" class="checkbox" value="1" {{#if enabled}}checked{{/if}}>
	<label for="enableFacerecognition">{{enableDescription}}</label><br>
	<div id="optional-buttons-div"></div>
	<div class="persons-previews">
		{{#each persons}}
			<div class="person-box" data-id="{{name}}">
				<div class="face-preview-big lozad" data-background-image="{{thumbUrl}}" width="128" height="128"></div>
				<p class="person-name">
					<span>{{name}}</span>
				</p>
				<p class="person-desc">{{noPhotos count}}</p>
			</div>
		{{/each}}
	</div>
{{else if loaded}}
	<h2>
		{{appName}}
	</h2>
	<input id="enableFacerecognition" name="enableFacerecognition" type="checkbox" class="checkbox" value="1" {{#if enabled}}checked{{/if}}>
	<label for="enableFacerecognition">{{enableDescription}}</label><br>
	<div id="optional-buttons-div"></div>
	<div class="emptycontent">
		<div class="icon-contacts-dark svg"></div>
		<h2>
			{{emptyMsg}}
		</h2>
		<p>
		{{emptyHint}}
		</p>
	</div>
{{else}}
	<h2>
		{{appName}}
	</h2>
	<div class="emptycontent">
		<div class="icon-contacts-dark svg"></div>
		<h2>
			{{loadingMsg}}
		</h2>
		<img class="loadingimport" src="{{loadingIcon}}"/>
	</div>
{{/if}}

</div>